<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <title>AI 定时任务演示 (Java + MySQL)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <style>
    body { font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; margin: 0; background: #f7f7fb; }
    header { background: #111827; color: #fff; padding: 14px 18px; }
    main { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; padding: 16px; }
    section { background: #fff; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.06); padding: 16px; }
    h2 { margin-top: 0; }
    .row { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
    input, select { padding: 8px 10px; border: 1px solid #ddd; border-radius: 10px; }
    button { padding: 8px 14px; border: none; background: #2563eb; color: #fff; border-radius: 10px; cursor: pointer; }
    button.secondary { background: #6b7280; }
    table { width: 100%; border-collapse: collapse; }
    th, td { text-align: left; padding: 8px; border-bottom: 1px solid #eee; font-size: 14px; }
    pre { white-space: pre-wrap; background: #0b1021; color: #e2e8f0; padding: 10px; border-radius: 10px; max-height: 260px; overflow: auto; }
    .pill { padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 12px; }
    @media (max-width: 980px){ main { grid-template-columns: 1fr; } }
  </style>
</head>
<body>
  <header>
    <strong>AI 定时任务演示</strong> &nbsp; <span class="pill">Java + Spring Boot + MySQL</span>
  </header>
  <main>
    <section>
      <h2>新建任务</h2>
      <div class="row">
        <input id="name" placeholder="任务名称" style="flex:1"/>
        <select id="type">
          <option value="NEWS">新闻汇总</option>
          <option value="HOTSPOT">热点追踪</option>
          <option value="SOCIAL">社媒分析</option>
          <option value="CUSTOM">自定义</option>
        </select>
        <input id="keywords" placeholder="关键词（逗号分隔）"/>
      </div>
      <div class="row">
        <input id="fetchUrl" placeholder="抓取 URL（可为空，默认 Hacker News RSS）" style="flex:1"/>
        <input id="interval" type="number" value="60" min="1" style="width:120px"/> 分钟运行一次
      </div>
      <div class="row">
        <input id="model" placeholder="AI 模型（如 gpt-4o-mini 或 deepseek-chat）" style="flex:1"/>
        <button onclick="createTask()">创建任务</button>
      </div>

      <h2 style="margin-top:18px;">任务列表</h2>
      <table id="tasksTable">
        <thead><tr><th>ID</th><th>名称</th><th>类型</th><th>间隔</th><th>状态</th><th>操作</th></tr></thead>
        <tbody></tbody>
      </table>
    </section>

    <section>
      <h2>对话配置助手</h2>
      <div id="chatBox" style="height:300px; overflow:auto; border:1px solid #eee; border-radius:10px; padding:8px; background:#fcfcff;"></div>
      <div class="row">
        <input id="msg" placeholder="比如：为‘人工智能’创建一个每 30 分钟的新闻任务" style="flex:1"/>
        <button onclick="send()">发送</button>
      </div>
      <hr/>
      <h3>最近一次结果</h3>
      <div id="result"></div>
    </section>
  </main>

<script>
async function fetchTasks(){
  const res = await fetch('/api/tasks'); const data = await res.json();
  const tbody = document.querySelector('#tasksTable tbody'); tbody.innerHTML = '';
  for (const t of data){
    const tr = document.createElement('tr');
    tr.innerHTML = `<td>${t.id}</td><td>${t.name||''}</td><td>${t.type}</td><td>${t.intervalMinutes}m</td>
      <td>${t.lastStatus||''}</td>
      <td>
        <button onclick="run(${t.id})">立即运行</button>
        <button class="secondary" onclick="show(${t.id})">查看结果</button>
        <button class="secondary" onclick="del(${t.id})">删除</button>
      </td>`;
    tbody.appendChild(tr);
  }
}

async function createTask(){
  const body = {
    name: document.getElementById('name').value,
    type: document.getElementById('type').value,
    keywords: document.getElementById('keywords').value,
    intervalMinutes: parseInt(document.getElementById('interval').value || '60'),
    model: document.getElementById('model').value || 'gpt-4o-mini',
    fetchUrl: document.getElementById('fetchUrl').value,
    enabled: true
  };
  await fetch('/api/tasks', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)});
  fetchTasks();
}

async function run(id){
  const res = await fetch(`/api/tasks/${id}/run`, {method:'POST'});
  const data = await res.json();
  document.getElementById('result').innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
  fetchTasks();
}

async function show(id){
  const res = await fetch(`/api/tasks/${id}/results`);
  const list = await res.json();
  document.getElementById('result').innerHTML = `<pre>${JSON.stringify(list[0] || {}, null, 2)}</pre>`;
}

async function del(id){
  await fetch(`/api/tasks/${id}`, {method:'DELETE'});
  fetchTasks();
}

async function send(){
  const box = document.getElementById('chatBox');
  const msg = document.getElementById('msg').value;
  box.innerHTML += `<div>🧑‍💻：${msg}</div>`;
  const res = await fetch('/api/chat', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({message: msg, model: 'gpt-4o-mini'})});
  const data = await res.json();
  box.innerHTML += `<div>🤖：<pre>${data.reply}</pre></div>`;
  box.scrollTop = box.scrollHeight;
}
fetchTasks();
</script>
</body>
</html>
